<template>
  <a_page>
    <!-- <a列表页头工具栏 :list="list" :详情="详情" /> -->
    <a工具栏 :list="list" :详情_抽屉式="详情" />

    <el-table :ref="list.表ref" border tooltip-effect="dark" :data="单项组" @selection-change="list.选中变了" class="全高-工具栏-60"
      row-key="id" @sort-change="list.sortChange" :default-sort="a.默认排序" empty-text="空空如也~~"
      :onHeaderDragend="list.列宽拖动">
      <el-table-column type="selection" width="40" />
      <el-table-column type="expand">
        <template #default="props">
          <!-- <a子表 :父单项="props.row" ref="子表ref" :父插组件="list.插组件" :父字段="list.插组件.取字段('项目明细')"
            :指定字段名组="['流量', '扬程', '数量', '泵型号', '电机型号']">
          </a子表> -->
          <a子表 :父单项="props.row" ref="子表ref" :父插组件="list.插组件" :父字段="list.插组件.取字段('项目明细')" 父环境="父表内嵌">
          </a子表>
        </template>
      </el-table-column>

      <!-- <el-table-column align="left" label="id" width="60" prop="id"/> -->
      <!-- <el-table-column align="left" label="编号" width="150" prop="编号" sortable>
        <template #default="scope">
          <el-button type="primary" link icon="link" @click="详情.初始化(scope.row)">{{ scope.row.编号
          }}</el-button>
        </template>
      </el-table-column> -->

      <template v-for="字段 in 插组件.列表显示字段s.value" :key="字段.名称">
        <a列表字段 :插组件="插组件" :字段="字段" :编辑否="list.a.编辑否" :详情_抽屉式="详情"/>
      </template>

      <!-- 末尾列 -->
      <el-table-column align="left" sortable label="修改时间" prop="UpdatedAt" width="180">
        <template #default="scope">{{ fmt时间(scope.row.UpdatedAt) }}</template>
      </el-table-column>
      <el-table-column align="left" label="操作" fixed="right" width="150">
        <template #default="scope">
          <el-button link icon="DocumentCopy" @click="详情.复制(scope.row)">复制</el-button>
          <el-button type="danger" link icon="delete" @click="list.删(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="gva-pagination">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="req.page" :page-size="req.pageSize"
        :page-sizes="a.可选页面容量" :total="a.total" @current-change="list.跳转页面" @size-change="list.改单页条数" />
    </div>
    <a详情 ref="详情ref" :list="list" :url="url"></a详情>
  </a_page>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import { fmt时间 } from '@/utils'
import a列表字段 from '@/components/a列表字段.vue';

const props = defineProps({
  url: String,
})

const cfg = {
  req: {
    pageSize: 20,
  },
}

import use from '@/hooks/uselist';
const list = use(cfg)
const { 插组件, a, 单项组, req } = list

const 详情ref = ref()
import a详情 from './详情_抽屉式.vue'
const 详情 = ref();
// let 详情
onMounted(() => {
  // console.log(`onMounted详情 ing👇`)
  详情.value = 详情ref.value.详情
  // console.log(`详情ref.value 👉`, 详情ref.value)
  // console.log(`详情.value 👉`,详情.value)
})

import a子表 from '@/components/a子表.vue';
const 子表ref = ref()
// import use详情_抽屉式 from '@/hooks/use详情_抽屉式';
// const 详情 = use详情_抽屉式({ to详情页否: true })

</script>

<style lang="scss" scoped></style>
